import React, {Component} from 'react';
import {Form, Input, Button, message, Spin, Card} from 'antd'
import {UserOutlined, LockOutlined, SafetyCertificateOutlined} from '@ant-design/icons'
import './index.less'
import axios from '@/components/service/request';
import {setStorage} from '@/utils/localstorage'
import FooterPage from '@components/layout/footerPage'
import {withRouter} from 'react-router-dom'

/**
 * 登录路由组件
 */
class Login extends Component {

    state = {
        loading: false
    }

    onFinish = (values) => {
        this.setState({
            loading: true
        })
        axios.post("/sys/user/login/account", {account: values.account, password: values.password})
            .then(res => {
                try {
                    if (res.code === 200) {
                        setStorage("user", res.data)
                        setStorage("token", res.data.token);
                        this.props.history.push('/admin');
                    } else {
                        message.error(res.msg)
                    }
                } catch (e) {
                    message.error(e);
                } finally {
                    this.setState({
                        loading: false
                    })
                }
            })
            .catch(err => {
                message.error("服务器异常！")
            })
            .finally(err => {
                this.setState({
                    loading: false
                })
            });
    };

    render() {
        return (
            <div className="login-container">
                <div className="login-content">
                    <Card className="login-card">
                        <div className="login-header">
                            <SafetyCertificateOutlined className="logo-icon" />
                            <h1>培养方案管理系统</h1>
                            <p>高校教学管理信息化平台</p>
                        </div>
                        <Spin spinning={this.state.loading}>
                            <Form
                                name="login"
                                className="login-form"
                                initialValues={{remember: true}}
                                onFinish={this.onFinish}
                            >
                                <Form.Item
                                    name="account"
                                    rules={[
                                        { required: true, message: '请输入工号!' }
                                    ]}
                                >
                                    <Input 
                                        prefix={<UserOutlined />} 
                                        placeholder="请输入工号"
                                        size="large"
                                    />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        { required: true, message: '请输入密码!' }
                                    ]}
                                >
                                    <Input.Password
                                        prefix={<LockOutlined />}
                                        placeholder="请输入密码"
                                        size="large"
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Button 
                                        type="primary" 
                                        htmlType="submit" 
                                        className="login-form-button"
                                        size="large"
                                        block
                                    >
                                        登录系统
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Spin>
                    </Card>
                </div>
                <FooterPage />
            </div>
        );
    }
}

export default withRouter(Login);
